<template>
    <div class="attention">
        <div class="head">
            <ol class="head_nav">
                <li :class="listType == 2 ? 'on' : ''" @click="tab(2)">
                    <span>关注大师</span>
                </li>
                <li :class="listType == 3 ? 'on' : ''" @click="tab(3)">
                    <span>关注闪问</span>
                </li>
            </ol>
        </div>
        <ul class="cont_list" v-if="listType == 2">
            <atten-list v-for="(item, key) in favoritelist" :key="key" :item="item"/>
        </ul>
        <ul class="cont_list" v-if="listType == 3">
            <flash-asked v-for="(val, ind) in favoritelist" :key="ind" :item="val"/>
        </ul>
        <cancel :abolish="abolish" v-if="abolish.bools"/>
        <aboli :aboli="aboli" v-if="aboli.bools"/>
    </div>
</template>

<script>
    import attenList from '@/components/attenList'
    import flashAsked from '@/components/flashAsked'
    import cancel from '@/components/cancel'
    import aboli from '@/components/abolish'
    import Bus from '@/bus/bus.js'
    export default {
        name: 'attention',
        components: {
            attenList,
            flashAsked,
            cancel,
            aboli
        },
         data() {
             return {
                isCancel: false,
                listType: 2,
                favoritelist: [],
                abolish: {
                    bools: '',
                    id: '', 
                    type: ''
                },
                aboli: {
                    bools: '', 
                    id: '', 
                    type: ''
                }
             }
         },
         created () {
            this.myfavoritelist(this.listType);
            Bus.$on('msg', (e) => {
                if(e.type == 2) {
                    this.abolish = e;
                } else if (e.type == 3) {
                    this.aboli = e;
                }
                this.myfavoritelist(this.listType);
            })
        },
        methods:{
            tab(code){
                this.listType = code;
                this.myfavoritelist(code);
                if(code == 2)
                    location.reload()
            },
            myfavoritelist(code) {
                let params = {
                    userId: this.$store.state.userId,
                    favoriteType: code
                }
                this.$http.fetchGet('myfavoritelist', params).then((res) => {
                    if(res.code == 200) {
                        this.favoritelist = res.data.root
                    } else {

                    }
                }, (err) => {
                    console.log(err)
                })
            }
        },
        mounted() {
            
        }
    }
</script>

<style lang="less" scoped>
    .attention{
        background: #f2f2f2;
        box-sizing: border-box;
        .pt(88);
        display: flex;
        flex-direction: column;
        .head{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            .h(88);
            border-bottom: 1px solid #f2f2f2;
            z-index: 99;
            .head_nav{
                display: flex;
                width: 100%;
                .h(88);
                background: #fff;
                li{
                    flex: 1;
                    text-align: center;
                    span{
                        display: inline-block;
                        .lh(88);
                    }
                }
                .on{
                    span{
                        border-bottom: 2px solid #189BEB;
                        color: #189BEB;
                    }
                }
            }
        }
        .cont_list{
            flex: 1;
            overflow-y: scroll;
            background: #fff;
            box-sizing: border-box;
            li{
                .lh(88);
            }
        }
    }
    
</style>
